<!--  -->
<template>
  <div class="confirm-pay">
    <!-- 头部导航 -->
    <van-nav-bar
      title="确认订单"
      left-text="关闭"
      fixed
      :z-index="999"
      @click-left="onClickLeft"
    >
    </van-nav-bar>
    <!-- 选择支付方式 -->
    <div class="pay-ways">
      <div class="way-list">
        <div class="pay-item">
          <img src="../../assets/images/zhifubao.png" alt="支付宝支付" />
          <div class="info">
            <div class="title">支付宝支付</div>
            <div class="tip">推荐支付宝用户使用</div>
          </div>
          <div class="btn">
             <van-radio-group v-model="payWay">
              <van-radio name="支付宝支付" checked-color="#ee0a24"></van-radio>
            </van-radio-group>
          </div>
        </div>
        <div class="pay-item">
          <img src="../../assets/images/weixin.png" alt="微信支付" />
          <div class="info">
            <div class="title">微信支付</div>
            <div class="tip">推荐已经开通微信支付的用户使用</div>
          </div>
          <div class="btn">
            <van-radio-group v-model="payWay">
              <van-radio name="微信支付" checked-color="#ee0a24"></van-radio>
            </van-radio-group>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部栏 -->
    <div class="bottom-bar">
      <div class="left">合计: <span>${{totalPrice}}.00</span></div>
      <div class="right" @click="toPay">去支付</div>
    </div>
  </div>
</template>

<script>
import { NavBar, Radio, RadioGroup } from "vant";
export default {
  data() {
    return {
      payWay: "支付宝支付",
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    //去支付
    toPay(){
      console.log('换起APP完后支付')
    }
  },
  components: {
    [NavBar.name]: NavBar,
    [Radio.name]: Radio,
    [RadioGroup.name]: RadioGroup,
  },
  computed:{
    totalPrice(){
      let total = 0
      this.$store.state.goodList.forEach(item=>{
        total += item.price * item.num
      })
      return total
    }
  }
};
</script>
<style scoped>
.confirm-pay {
  padding-top: 46px;
  padding-bottom: 56px;
  font-size: 16px;
}
/* 头部导航 */
.van-nav-bar {
  background-color: #ff6a00;
}
.confirm-pay >>> .van-nav-bar__title {
  color: #fff;
  font-size: 18px;
}
.confirm-pay >>> .van-nav-bar__text {
  color: #fff;
  font-size: 16px;
}
/* 支付方式 */
.pay-ways {
  padding: 0 20px;
}
.pay-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}
.pay-item img {
  width: 60px;
}
.pay-item .info {
  flex: 1;
  margin-left: 20px;
}
.pay-item .tip {
  font-size: 14px;
  color: #ccc;
  margin-top: 4px;
}
/* 底部栏 */
.bottom-bar{
  display: flex;
  position:fixed;
  left:0;
  bottom:0;
  width:100vw;
  height:56px;
  color:#fff;
  background-color: #000;
}
.bottom-bar .left{
  flex:1;
  font-size: 14px;
  line-height:56px;
  color:#ccc;
  padding-left: 20px;
}
.bottom-bar .left span{
  font-size: 18px;
  color:#fff;
  margin-left: 6px;
}
.bottom-bar .right{
  width:120px;
  text-align: center;
  line-height:56px;
  font-size: 18px;
  background-color: #007acc;
}
</style>